<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>

  <body>
    <ul>
      <li>青花瓷</li>
      <li>轨迹</li>
      <li>东风破</li>
      <li>发如雪</li>
    </ul>
    <ol>
      <li>因为爱情</li>
      <li>浮夸</li>
      <li>好久不见</li>
      <li>富士山下</li>
    </ol>
    <script>
      /* 
            jQuery 筛选选择器：
            
            语法          示例            描述
            :first      $('li:first')   获取第一个元素
            :last       $('li:last')    获取最后一个元素
            :eq(index)  $('li:eq(2)')   获取索引号为2的元素
            :odd        $('li:odd')     获取li元素中的索引号为奇数的元素
            :even       $('li:even')    获取li元素中的索引号为偶数的元素
        */
      // $(元素).css('属性', 值);

      $("ul li:first").css("color", "red");
      $("ul li:last").css("color", "blue");
      $("ul li:eq(2)").css("color", "purple");
      $("ol>li:odd").css("color", "green");
      $("ol>li:even").css("color", "brown");
    </script>
  </body>
</html>